import React, { Component } from 'react'
import Icon from 'react-native-vector-icons/Ionicons'
import Button from 'react-native-button'
import {
  StyleSheet,
  Text,
  View
} from 'react-native'

export default class Publish extends Component {
  constructor(props) {
    super(props)
  }

  onPressCloseButton() {
    this.props.navigator.dismissModal({
      animationType: 'slide-down' // 'none' / 'slide-down' , dismiss animation for the modal (optional, default 'slide-down')
    })
  }

  onPressCreateTravelJournalButton() {

  }

  onPressCreateTravelPlanButton() {

  }

  render() {
    return (
      <View style={ styles.container }>
        <Text style={ styles.header }>
          开始创建
        </Text>
        <Icon
          name='ios-bookmarks-outline'
          size={ 96 }
          color='#FFFFFF'
        ></Icon>
        <Button
          style={ styles.btn }
          containerStyle={ styles.btnContainer }
          onPress={this.onPressCreateTravelPlanButton}>旅行计划</Button>
        <Button
          style={ styles.btn }
          containerStyle={ styles.btnContainer }
          onPress={this.onPressCreateTravelJournalButton}>旅行日记</Button>
        <Icon
          sytle={ styles.closeBtn }
          name='ios-close'
          size={ 50 }
          color='#FFFFFF'
          onPress={() => this.onPressCloseButton()}
        ></Icon>
      </View>
    )
  }
}

const styles = StyleSheet.create( {
  container: {
    flex: 1,
    flexDirection: 'column',
    justifyContent: 'space-between',
    alignItems: 'center',
    paddingTop: 20,
    backgroundColor: '#0099FF'
  },
  header: {
    fontSize: 26,
    marginTop: 35,
    color: '#FFFFFF'
  },
  btn: {
    color: "#0099FF"
  },
  btnContainer: {
    paddingTop: 7,
    paddingBottom: 7,
    paddingLeft: 26,
    paddingRight: 26,
    borderRadius: 3,
    backgroundColor: '#FFFFFF'
  },
  closeBtn: {

  }
} )